<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>推广报表</h3></div>
                  <div class="cacxun">
                    <div class="forms">
                      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                        <el-form-item label="营销推广内型：">
                          <el-select v-model="ruleForm.region" style="width: 30%;" placeholder="请选择包裹状态">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="推广时间：" >
                          <el-select v-model="ruleForm.name" style="width: 30%;">
                            <el-option label="区域一11" value="shangha11i"></el-option>
                            <el-option label="区域二11" value="beijing11"></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="推广位：" >
                          <el-select v-model="ruleForm.posin" style="width: 30%;">
                            <el-option label="区域一11" value="shangha11i"></el-option>
                            <el-option label="区域二11" value="beijing11"></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item style="margin-left: 100px;">
                          <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
                          
                        </el-form-item>
                    </el-form>
                  </div>
                  <div class="biaog">
                      <div class="on"><h3>查询结果详情</h3></div>
                      <div class="wefnefaw">
                        <ul>
                          <li>推广前</li>
                          <li>浏览总量：1200</li>
                          <li>点击总量：346</li>
                          <li>参与总数：240</li>
                          <li>单日最高浏览量：420</li>
                          <li>单日最高点击量：145</li>
                          <li>单日最高参与数：120</li>
                        </ul>
                        <ul>
                          <li>推广后</li>
                          <li>浏览总量：1200</li>
                          <li>点击总量：346</li>
                          <li>参与总数：240</li>
                          <li>单日最高浏览量：420</li>
                          <li>单日最高点击量：145</li>
                          <li>单日最高参与数：120</li>
                        </ul>
                        <div id="barGraph" style="width: 400px;height:300px;"></div>
                      </div>
                  </div>
                   <businessF/>
                  </div>
                
                </div>
                 
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        ruleForm: {
          name: '',
          posin:'',
          bian:'',
          region: '',
          desc: '',
          date1:''
        },
        rules: {
          name: [
            { required: true, message: '请输入您的姓名', trigger: 'blur' }
          ],
          posin : [
            { required: true, message: '请输入您的电话', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入您的详细地址', trigger: 'blur' }
          ]
        },
      }
      
    },
    mounted() {
      this.drawLine();
    },
    methods: {
       drawLine(){

         var myChart = echarts.init(document.getElementById('barGraph'));
        myChart.setOption({
        title: {
          text: '全年产量趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          left: 'center',
          data: ['本年', '上年'],
          bottom:0
        },
        xAxis: {
          type: 'category',
          name: 'x',
          splitLine: {show: false},
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        grid: {
          left: '1%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          name: 'y',
          splitLine: {show: true},
          data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
        },
        series: [
          {
            name: '本年',
            type: 'line',
            data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
          },
          {
            name: '上年',
            type: 'line',
            data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
          },
        ]
      })
        


       },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
}
</script>
<style scoped>
#barGraph {
    margin-left: 45px;
    margin-top: -36px;
}
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.forms /deep/ .el-button--primary:hover {
    background: #fdab9c;
    border-color: #fdab9c;
}
.forms /deep/ .el-button--primary {
    color: #FFF;
    background-color: #ff9381;
    border-color: #ff9381;
}

.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  height: 1227px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  height: 1227px;
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra {
  font-size: 20px;
  color: #313131;
  margin-top: 15px;
}
.conres h4{
  font-family: SourceHanSansCN-Bold;
	font-size: 20px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  text-align: center;
}
.conres .ra h3 {
    font-size: 20px;
    color: #f06048;
    padding-left: 14px;
    border-bottom: 1px solid #cecece;
    padding-bottom: 10px;
}
.cacxun {
  height: 245px;
  border-bottom: 1px solid #cecece;
}
.forms {
  margin-top: 20px;
}
.biaog {
  margin-top: 20px;
  margin-bottom: 85px;
}
.biaog .on h3{
  font-size: 20px;
    margin-left: 40px;
    margin-top: 50px;
    margin-bottom: 20px;
}
.wefnefaw {
  display: flex
}
.wefnefaw ul {
  margin-left: 40px;
}
.wefnefaw ul li {
  line-height: 27px;
  font-size: 16px
}
</style>